<template>
  <div class="app-container">
    <el-card header="国标设备">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="RefreshRight" @click="getGBDevices" v-hasPermi="['iot:gb:devices']">刷新</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="loading" :data="deviceList" border >
        <el-table-column prop="name" label="名称" min-width="160" align="center" fixed></el-table-column>
        <el-table-column prop="deviceId" label="设备编号" min-width="200" align="center"></el-table-column>
        <el-table-column prop="channelCount" label="通道数" min-width="120" align="center"></el-table-column>
        <el-table-column label="ip地址" min-width="160" align="center">
          <template v-slot:default="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag v-if="scope.row.hostAddress" size="medium">{{ scope.row.hostAddress }}</el-tag>
              <el-tag v-if="!scope.row.hostAddress" size="medium">未知</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="120" align="center">
          <template v-slot:default="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium" v-if="scope.row.onLine">在线</el-tag>
              <el-tag size="medium" type="info" v-if="!scope.row.onLine">离线</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="流传输模式"  min-width="160" >
          <template v-slot:default="scope">
            <el-select size="mini" @change="transportChange(scope.row)" v-model="scope.row.streamMode" placeholder="请选择" style="width: 120px">
              <el-option key="UDP" label="UDP" value="UDP"></el-option>
              <el-option key="TCP-ACTIVE" label="TCP主动模式"  value="TCP-ACTIVE"></el-option>
              <el-option key="TCP-PASSIVE" label="TCP被动模式" value="TCP-PASSIVE"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="manufacturer" label="厂家" min-width="120" align="center"></el-table-column>
        <el-table-column prop="transport" label="信令传输模式" min-width="120" align="center"></el-table-column>
        <el-table-column prop="keepaliveTime" label="最近心跳" min-width="160" align="center"></el-table-column>
        <el-table-column prop="registerTime" label="最近注册"  min-width="160" align="center"></el-table-column>
        <el-table-column label="操作" min-width="180" align="center" fixed="right">
          <template v-slot:default="scope">
            <el-button type="text" size="medium" v-bind:disabled="scope.row.online==0" icon="Refresh" @click="refDevice(scope.row)"
                       @mouseover="getTooltipContent(scope.row.deviceId)">刷新
            </el-button>
            <el-button type="text" size="medium" icon="VideoCamera" @click="showChannelList(scope.row)">通道</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
          v-show="deviceTotal>0"
          :total="deviceTotal"
          v-model:page="queryParams.page"
          v-model:limit="queryParams.count"
          @pagination="getGBDevices"
      />

    </el-card>
  </div>
  <syncChannelProgress ref="syncChannelProgressRef"></syncChannelProgress>
</template>

<script setup name="Cascade">
import {devicesSync, getDeviceList, getSyncStatus, getTransport} from "@/api/iot/gb";
import {onMounted} from "vue";
import { ElMessage } from 'element-plus';
import syncChannelProgress from './components/SyncChannelProgress.vue'


const router = useRouter();
const syncChannelProgressRef = ref(null);

async function getTooltipContent(deviceId) {
  let result = "";
  const res = await getSyncStatus({deviceId: deviceId});
  if (!res || !res.data) {
    result = "无同步状态信息";
  } else if (res.data.errorMsg !== null) {
    result = res.data.errorMsg;
  } else if (res.data.msg !== null) {
    result = res.data.msg;
  } else {
    result = `同步中...[${res.data.current}/${res.data.total}]`;
  }
  return result;
}

async function refDevice(itemData) {
  await devicesSync({deviceId: itemData.deviceId});
  syncChannelProgressRef.value.openDialog(itemData.deviceId, ()=>{
    getGBDevices()
  })
}

/**
 * 返回
 * @param row
 */
function showChannelList(row) {
  router.push({ path: "/media/channelList", query: {deviceId: row.deviceId} });
}

/**
 * 修改传输方式
 * @param row
 * @returns {Promise<void>}
 */
async function transportChange(row) {
  const query = {
    deviceId: row.deviceId,
    streamMode: row.streamMode
  }
  await getTransport(query);
  ElMessage({
    message: '操作成功！',
    type: 'success',
  })
}

/**
 * 设备列表获取
 * @type {*}
 */
const queryParams = ref({
  page: 1,
  count: 10,
})
const deviceList = ref([]);
const deviceTotal = ref(0);
const loading = ref(true);
async function getGBDevices() {
  loading.value = true;
  const res = await getDeviceList(queryParams.value);
  if (res.data) {
    deviceList.value = res.data.list;
    deviceTotal.value = res.data.total;
  }
  loading.value = false;
}

onMounted(async () => {
  await getGBDevices();
})
</script>

<style scoped>

</style>